<template>
	<view class="content">
		<!-- <u-navbar :background="navbackcolor" :border-bottom="false" back-icon-color="#ffffff"></u-navbar> -->
		<u-navbar :background="navbackcolor" :border-bottom="false" :back-text-style="{ color: '#000' }" title="宝宝主页"
			title-color="#000" back-icon-color="#000" :custom-back='back'></u-navbar>
		<view class="flexcen" v-if="als" style="padding-top: 25rpx;">
			<l-painter :board="poster" isCanvasToTempFilePath @success="path = $event" />
		</view>
		<!-- <image :src="'data:image/png;base64,'+path" mode="" style="width: 500rpx;height: 500rpx;"></image> -->
		<view class="bottFix flexcen">
			<view class="bots flexcen" @click="saveImage">
				保存图片
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				path: '',
				poster: {},
				check_goods: [],
				als: false,
				user: []
			}
		},
		onLoad(option) {
			let that = this
			that.getUser2().then(res => {
				that.user = res.data
				that.getData(option.id)
			})

		},
		methods: {
			async getData(id) {
				let that = this
				this.pageshowloading()
				var userId = uni.getStorageSync('userId');
				var data = {
					queryId: id
				}
				var res = await this.getdatas(data, "/api/Goods/GoodsInfo")
				this.check_goods = res.data
				let url = this.getUrl(this.check_goods.Url)
				data = {
					path: "path=/pages2/pages/commodity/commodity?id=" + id
				}
				let parentId = uni.getStorageSync("userid")
				let das = {
					"queryType": 0, //类型 0-商品 1-商品券 2-兑换券
					"queryName": "/pages2/pages/commodity/commodity?id=" + id + '&parentId=' + parseInt(
						userId) //跳转路径
				}
				let tems = encodeURIComponent(das.queryName)
				res = await this.getdatas({}, "/api/User/MyGoodsQrCode?path=" + tems)
				let erwei = res.data
				console.log(erwei)
				this.poster = {
					css: {
						width: "625rpx",
						paddingBottom: "40rpx",
						height: "1054rpx",
						background: "#fff",
						borderRadius: "32rpx"
					},
					views: [{
							type: 'view',
							css: {
								width: '625rpx',
								height: '625rpx',
							},
							views: [{
								src: url,
								type: "image",
								css: {
									background: "#fff",
									width: "625rpx",
									height: "625rpx",
									borderRadius: "32rpx 32rpx 0 0 "
								}
							}],
						},
						{
							type: 'view',
							css: {
								width: "100%",
								height: '68rpx',
								// padding:"0 24rpx",
								margin: "32rpx 0"
							},
							views: [{
									src: this.user.Avatar,
									type: "image",
									css: {
										background: "#fff",
										width: "68rpx",
										height: "68rpx",
										borderRadius: "50%"
									}
								},
								{
									text: this.user.UserName,
									type: "text",
									css: {
										color: "#000",
										fontSize: "30rpx",
										marginLeft: "24rpx",
										marginTop: "13rpx",
										lineClamp: "1",
										width: "250rpx",
									},
								}
							],
						},
						{
							type: 'view',
							css: {
								width: "100%",
								height: '68rpx',
								// padding:"0 24rpx",
								// margin:"32rpx 0"
							},
							views: [{
									text: this.check_goods.Name,
									type: "text",
									css: {
										color: "#000",
										fontSize: "30rpx",
										marginLeft: "24rpx",
										// marginTop: "13rpx",
										lineClamp: "2",
										width: "350rpx",
									},
								},
								{
									type: "view",
									css: {
										background: "#b8bdb5",
										width: "1",
										height: "65rpx",
										display: "inline-block",
										marginLeft: "40rpx",
										marginRight: "40rpx",
									},
								},
								{
									text: this.check_goods.GoodsType != 3 ? ("￥" + this.check_goods
										.Price) : (this.check_goods.GoodsType + "积分"),
									type: "text",
									css: {
										color: "#D32C26",
										fontSize: "34rpx",
										// marginTop: "13rpx",
										lineClamp: "2",
										width: "120rpx",
										display: "inline-block",
										lineHeight: "70rpx"
									},
								}
							],
						},
						{
							type: 'view',
							css: {
								width: "100%",
								height: '200rpx',
								// padding:"0 24rpx",
								margin: "32rpx "
							},
							views: [{
									src: erwei,
									type: "image",
									css: {
										background: "#fff",
										width: "200rpx",
										height: "200rpx",
									}
								},
								{
									text: "① 保存图片到相册",
									type: "text",
									css: {
										color: "#000",
										fontSize: "30rpx",
										marginLeft: "24rpx",
										marginTop: "13rpx",
										lineClamp: "1",
										width: "250rpx",
									},
								},
								{
									text: "② 分享给好友扫码购买",
									type: "text",
									css: {
										color: "#000",
										fontSize: "30rpx",
										marginLeft: "24rpx",
										marginTop: "13rpx",
										lineClamp: "1",
										// width: "250rpx",
										position: 'absolute',
										right: "92rpx",
										top: "60rpx"
									},
								}
							],
						},
					]
				}
				console.log(JSON.stringify(this.poster2))
				setTimeout(function() {
					uni.hideLoading()
					that.als = true
				}, 1500);
			},
			saveImage() {
				// #ifndef H5
				let pat = ""
				pat = this.path
				console.log(this.path)
				uni.saveImageToPhotosAlbum({
					filePath: pat,
					success(res) {
						uni.showToast({
							title: "保存成功"
						})
					},
					fail(res) {
						console.log(res)
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			}
		}
	}
</script>
<style scoped lang="less">
	.content {
		min-height: 100%;
		background: linear-gradient(180deg, #3FB857 0%, #94E9A5 100%);
	}

	.bottFix {
		width: 100%;
		height: calc(98rpx + env(safe-area-inset-bottom));
		background-color: #FFFFFF;
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 99;

		.bots {
			width: 686rpx;
			height: 68rpx;
			background: linear-gradient(90deg, #B2F199 0%, #8BD98B 100%);
			opacity: 1;
			border-radius: 35rpx;
			color: #000;
			font-size: 30rpx;
		}
	}
</style>
